$(function(){
    // 模拟数据内容  这里为了为了方便使用了es6模板语法，不支持兼容ie9，请使用es5的拼接渲染方式

    var dataBanners=[
        {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创1'},
        {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创2'},
        {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创3'},
        {data_banner:'https://media.w3.org/2010/05/sintel/trailer.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创4'},
        {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创4'}
    ]

    console.log(dataBanners);
    var banners_datas = ''
    $.each(dataBanners,function(v,m){
        console.log(v,m.data_banner);  
        //video-active 为选中效果
        banners_datas += `<div class="swiper-slide slide-video">
                                    <div  class="video-banner"
                                        data-banner='${dataBanners[v].data_banner}'>
                                        <img src="${dataBanners[v].img}" alt="">
                                        <p>${dataBanners[v].txt}</p>
                                    </div>
                                </div>`
        
    })
    $('.box-video').append(banners_datas)
    // video切换
    $('.video-banner').click(function () {
        $(this).addClass('video-active').parent().siblings().children().removeClass('video-active')
        var playurl = $(this).data('banner');
        document.getElementById("videos").src = playurl;
        $("#videos")[0].play();
    })


    // 点击获取当前下标
    $('.swiper-slide').click(function(){
        var i =$(this).index()
          changeURLParam('aid', i)
      })
    // 获取自定义属性

    var mySwipersVideo = new Swiper('.swiper-videos', {
        // autoplay: 5000,//可选选项，自动滑动
        // loop: true,//可选选项，开启循环
                // 渲染数据的时候，如果真实接口出不来数据，请把swiper的js都放到请求里面，开启下面swiepr初始化
    // observer:true,//修改swiper自己或子元素时，自动初始化swiper
    //     observeParents:true,//修改swiper的父元素时，自动初始化swiper
        paginationClickable: true,
        slidesPerView: 4,
        // onInit: function (mySwipersVideo) {
        //     mySwipersVideo.swipeNext()
        // }
    })
    // 点击左右swiper按钮
    $('#btnVideo1').click(function () {
        mySwipersVideo.swipePrev();
        
        
    })
    $('#btnVideo2').click(function () {
        mySwipersVideo.swipeNext();
    })

     //切换效果
    $('.zs-tabs>p').click(function () {
        $(this).addClass('zs-acitve').siblings().removeClass('zs-acitve')
        $('.tabs1-active').eq($(this).index()).show().siblings().hide()
    })

    // 实现无刷新动态添加url地址
function changeURLParam(name, value) {
    var url = document.URL, resultUrl = ''
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg);
    var replaceText = name + '=' + value;
    if (r != null) {
        var tmp = url.replace(unescape(name + '=' + r[2]), replaceText);
        resultUrl = (tmp);
    } else {
        if (url.match('[\?]')) {
         resultUrl = url + '&' + replaceText;
        }
        else {
         resultUrl = url + '?' + replaceText;
        }
    }
    history.replaceState(null, null, resultUrl)
 }
})